<template>
<view>
<view class="banner">
	<swiper :autoplay="autoplay" :interval="interval" :duration="duration" circular="true" :indicator-dots="bannerLength" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#FF4444">
		<!-- <block wx:for="{{imgUrls}}" wx:key=""> -->
		<swiper-item>
			<video src="https://apd-dd4b62c8c2326324047c4ed8d2b3d546.v.smtcdns.com/mv.music.tc.qq.com/AstraRdOLf2DrNNdTMaVEGy6ba0pLm6zTc-wuvgE5NyI/50EDEAE2AA3E678BFDF9903EC6939614B499B0F5EE294622107C313036764FEC66F5DA578776CF9FD3CD5C9AFB4819AAZZqqmusic_default/1049_M0101864001io88P3XXq8U1001730732.f9844.mp4?fname=1049_M0101864001io88P3XXq8U1001730732.f9844.mp4" controls autoplay="true" class="video" object-fit="fill"></video>
		</swiper-item>
		<swiper-item v-for="(item, index) in shopInfoList.pic" :key="index" @tap="banner" :data-index="index">
			<image :src="item.big" class="slide-image"></image>
		</swiper-item>
		<!-- </block> -->
	</swiper>
</view>
<view class="title-warp">
	<view class="current">
		<text>￥</text>
		<text>{{shopInfoList.price}}</text>
	</view>
	<view class="mktprice" :hidden="mktpriceShow">
		<text>￥</text>
		<text>{{mktprice}}</text>
	</view>
	<view class="title">
		<text>{{shopInfoList.name}}</text>
	</view>
	<!-- <view class='del original'>
    <text>￥</text>
    <text>2990.00</text>
  </view> -->
	<view class="repertory fr">
		库存
		<text>{{shopInfoList.goods_number}}</text>
		<view class="fenxiang" @tap="fenxiang">
			<image class="fxtp" src="/static/remao_shop/img/share_icon.png"></image>
			<view>分享</view>
		</view>
	</view>

	<tui-bottom-popup :show="fxshow" class="popup" position="bottom" overlay="true">
		<view class="shop">
			<button open-type="share" class="shop-p" hover-class="none">
				<view class="scsphb">
					<image src="/static/remao_shop/img/pengyou.png"></image>
				</view>
				<view class="fxpy">分享给朋友</view>
			</button>
			<view class="shop-p" @tap="formSubmit">
				<view class="scsphb">
					<image src="/static/remao_shop/img/fenxiange.png"></image>
				</view>
				<view>生成商品海报</view>
			</view>
		</view>
		<button hover-class="none" class="button" @tap="nofxshow">关闭</button>
	</tui-bottom-popup>
	<!-- <view class='cont-con' wx:if="{{yesshow}}"> -->
	<!-- <view class='cont-bai'> -->
	<!-- <view class='cguanbi'>
          <image class='guanbi' src='../../img/close.png' bindtap='noyesshow'></image>
        </view> -->
	<!-- 
        <view class='content'>
          <image src='{{shopInfoList.pic[0].big}}'></image>
          <view>{{shopsList.goods.name}}</view>
          <poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
            <button>点击生成海报</button>
          </poster>
        </view>
        <button class='bac' bindtap='baoctp'>保存图片</button>
        <view class='baocz'>保存至相册</view> -->
	<!-- <view> -->
	<!-- <image src="{{img}}" class='bgImg'></image> -->
	<!-- <text class='mine'>我的邀请码</text>
  <text class='code'>{{code}}</text> -->
	<!-- <text class='who'>{{shopInfoList.name}}</text> -->
	<!-- <view class='inputBox'>
    <input placeholder='输入朋友的验证码' class='input' bindinput='bindKeyInput'/>
    <button bindtap='btnclick' class='btn'>提交</button>
  </view> -->
	<!-- <text class='tishi'>输入朋友的邀请码，朋友和你各自获得通用优惠券1张</text> -->
	<!-- <text class='shareText'>生成海报分享至</text>
  <view class='imgBox'>
    <button open-type="share" class='zfbtn'><image src="{{wechat}}" class='img'></image></button>
    <button class='zfbtn m_l' bindtap='formSubmit'><image src="{{quan}}" class='img'></image></button>
  </view> -->

	<!--生成海报  -->
	<!-- <view class="img-box">
        
    </view> -->
	<view class="imagePathBox" :hidden="maskHidden == false" v-if="yesshow">
		<view class="beijing">
			<view class="cguanbi">
				<image class="guanbi" src="/static/remao_shop/img/tuichu.png" @tap="noyesshow"></image>
			</view>
			<image :src="imagePath" class="shengcheng"></image>
			<button class="baocun" @tap="baocun">保存相册</button>
		</view>
	</view>
	<view :hidden="maskHidden == false" class="mask"></view>
	<view class="canvas-box">
		<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas"></canvas>
	</view>
</view>
<!-- </view> -->
<!-- </view> -->
<!-- 详情&评价 -->
<view class="appraise-warp">
	<!-- tab选项卡 -->
	<view class="newbox1">
		<view v-for="(item, index) in navList" :key="index" @tap="getStatus" :id="'NAV' + index" class="appraise-title" :data-index="index">
			<view @tap="EventHandle">
				<text :class="index === status ? 'active' : ''">{{item}}</text>
			</view>
		</view>
	</view>
	<view class="newbox2">
		<!-- 详情 -->
		<view :hidden="status!==0" class="particulars-warp">
			<view class="particulars">
				<rich-text :nodes="shopInfoList.intro"></rich-text>
			</view>
		</view>
		<!-- 评价 -->
		<view :hidden="status!==1" class="particulars-warp">
			<view v-for="(item, i) in shopInfoList.comments" :key="i" class="appraise">
				<view class="appraise-pic">
					<image :src="item.touxiang"></image>
				</view>
				<view class="appraise-name">
					<text>{{item.author_name}}</text>
				</view>
				<view class="appraise-star fr">
					<image v-for="(item, index) in starNum[i]" :key="index" src="/static/remao_shop/img/startOn.png"></image>
				</view>
				<view class="appraise-time">
					<text>{{item.time}}</text>
				</view>
				<view class="appraise-cont">
					<text>{{item.comment}}</text>
				</view>
				<view class="cont-pic list" v-if="item.haspic==1">
					<image v-for="(items, indexImg) in item.pics" :key="indexImg" @tap.stop="lookPics" mode="aspectFill" :data-index="i" :data-indexs="indexImg" :src="items"></image>
				</view>
			</view>
		</view>
	</view>
</view>
<!-- 底部操作 -->
<view :class="system?'bottom-warp':'bottom-warp2'">
	<view class="left">
		<!--<view class='left-head'>
      <image src='../../img/Headphones_icon.png'></image>
    </view>-->
		<view class="line"></view>
		<view class="left-col">
			<view class="contact-btn">
				<button open-type="contact">
					<image src="/static/remao_shop/img/mineShop/contact.png" style="width:50rpx;height:50rpx;"></image>
				</button>
			</view>
		</view>
		<view class="line"></view>
		<view class="left-col">
			<view @tap="toShopCar">
				<view>
					<image src="/static/remao_shop/img/shopcar.png"></image>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="left-col">
			<view @tap="changepic">
				<view v-if="showView">
					<image src="/static/remao_shop/img/mine-shoucang_icon.png"></image>
				</view>
				<view v-if="!showView">
					<image src="/static/remao_shop/img/xq-yishoucang_icon.png"></image>
				</view>
			</view>
		</view>
	</view>
	<view class="middle" @tap="popupshow" data-car="1">
		<text>加入购物车</text>
	</view>
	<view class="right" @tap="popupshow" data-car="2">
		<text>直接购买</text>
	</view>
</view>
<!-- 加入购物车 -->
<view class="mask-box" :hidden="popup">
	<view @tap.stop="popuphidden" style="width:100%;height:650rpx;"></view>
	<view class="mask-bot">
		<view>
			<view class="popup-warp">
				<view class="popup-pic fl">
					<image :src="isShowImg" :data-img="isShowImg" @tap.stop="lookPic"></image>
				</view>
				<view class="pop-warp fr">
					<view class="pop-title">
						<text>{{shopInfoList.name}}</text>
					</view>
					<view class="pop-current">
						￥
						<text>{{isShowMoney}}</text>
					</view>
					<view class="pop-repertory fr">
						库存
						<text>{{shopInfoList.goods_number}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-for="(item, index) in specification" :key="index" class="spec-warp">
			<view class="spec">
				<text>{{item.spec_name}}</text>
			</view>
			<view class="option-warp">
				<view class="frame fl">
					<view>
						<block v-for="(item2, index2) in item.spec_values" :key="index2">
							<text :class="item2.isSelect?'op-active':'normal'" :data-select-index="index" :data-attr-index="index2" :data-content="specification" @tap="clickMenu">{{item2.spec_value}}</text>
						</block>
					</view>
				</view>
			</view>
		</view>
		<view class="count-warp">
			<view class="spec">
				<text>数量</text>
			</view>
			<view class="but">
				<text @tap="deleteShopNum">-</text>
				<text class="but-count">{{shopNum}}</text>
				<text @tap="addShopNum">+</text>
			</view>
		</view>
		<view class="btn-sure">
			<view class="confirm" @tap="optionsure">
				<text>确定</text>
			</view>
		</view>
	</view>
</view>
</view>
</template>

<script>
var iswe7 = wx.getStorageSync("iswe7");
let goodsList = [{
  actEndTime: '2018-11-30 10:00:00'
}];
import api from "../../../api";
import tuiBottomPopup from '../../component/tui-bottom-popup/tui-bottom-popup.vue'
var app = getApp(); // var text;
// var text;
var guige = [];
var myGuige = null;

export default {
	components: {
		tuiBottomPopup
	},
  data() {
    return {
      sss_id: '1',
      userId: '',
      bannerLength: false,
      bannerList: [],
      shopId: '',
      // shopInitImg: '',
      shopInitPrice: '',
      // 请求参数
      requestShopId: '',
      // 选择规格判断默认图片&价格--选择好规格后的价格和图片
      isShowImg: '',
      isShowMoney: '',
      // 商品详情列表
      shopInfoList: [],
      // 商品数量
      shopNum: 1,
      // 商品规格列表
      specification: [],
      // 选择好的规格
      changeSpecification: [],
      // tab切换
      navList: ["详情", "评价"],
      // 规格选择列表
      poplist: [],
      idd: [],
      // 是否选择了规格 判断
      ischangespecification: '',
      // 加入购物车&购买
      car: '',
      boolean: false,
      imgUrls: ["/static/remao_shop/img/details-banner.png", "/static/remao_shop/img/details-banner.png"],
      countDownList: [],
      actEndTimeList: [],
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 1000,
      status: 0,
      pop: 0,
      showView: true,
      popup: true,
      // 判断是否为秒杀商品
      ismiaosha: '',
      //评价星级
      starNum: [],
      //判断分享标签
      fxshow: false,
      yesshow: false,
      access_token: '',
      banshow: false,
      aaa: '',
      img: "",
      wechat: "",
      quan: "",
      code: "",
      inputValue: "",
      maskHidden: false,
      name: "",
      touxiang: "",
      erma: '',
      scene: '',
      youid: '',
      comeback: '',
      mktprice: '',
      mktpriceShow: true,
      system: '',
      imagePath: "",
      canvasHidden: false,
      hidden: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this; //判断系统

    wx.getSystemInfo({
      success: function (res) {
        console.log(res);

        if (res.platform == 'devtools') {
          that.setData({
            system: false
          });
        } else if (res.platform == 'ios') {
          that.setData({
            system: true
          });
        } else {
          that.setData({
            system: false
          });
        }
      }
    }); //收藏初始 

    let scene = null; // 判断是否为转发

    if (options.scene) {
      //判断是否是从登录页进来
      var comeback = wx.getStorageSync('comeBack');
      this.setData({
        comeback: comeback
      });

      if (this.comeback == 'undefined' || this.comeback == '') {
        scene = decodeURIComponent(options.scene);
      } else {
        scene = this.comeback;
        options = wx.getStorageSync('options');
      }

      console.log("options:");
      console.log(options); //const scene = '10094k195'

      console.log("scene:");
      console.log(scene);
      var ids = scene.split("k");
      console.log(ids); //this.setData({ sss_id: scene})

      if (ids[1] && ids[1] != '') {
        options.goods_id = ids[1];
      }

      if (ids[0] != '') {
        shopId: ids[1];

        isShowImg: ids[1];

        youid: ids[0];

        console.log("youid:");
        console.log(ids[0]);
        wx.getStorage({
          key: 'userId',
          success: res => {
            console.log(res);
            this.setData({
              userId: res.data
            });
          },
          fail: res => {
            console.log('没有登录');
            this.setData({
              fxshow: false
            });
            wx.navigateTo({
              url: '../../packageA/login/login?scene=' + scene + '&goods_id=' + options.goods_id + '&img=' + options.img + '&ismiaosha=0'
            });
          }
        });
        app.globalData.request({
          url: api.default.distribution_binding,
          data: {
            user_id: wx.getStorageSync("userId"),
            parent_id: ids[0]
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值

          },
          method: 'POST',
          success: res => {
            console.log("请求绑定结果:");
            console.log(res);
          }
        });
      }
    }

    this.setData({
      scene: scene,
      shopId: options.goods_id,
      isShowImg: options.img,
      ismiaosha: options.ismiaosha
    });
    this.getlist();

    if (options.img == '' || options.img == undefined) {
      this.setData({
        isShowImg: this.shopInfoList.pic[0].big
      });
    }

    var that = this;
    wx.getUserInfo({
      success: res => {
        console.log(res.userInfo, "huoqudao le ");
        this.setData({
          name: res.userInfo.nickName
        });
        wx.downloadFile({
          url: res.userInfo.avatarUrl,
          //仅为示例，并非真实的资源
          success: function (res) {
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            if (res.statusCode === 200) {
              console.log(res, "reererererer");
              that.setData({
                touxiang: res.tempFilePath
              });
            }
          }
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    wx.getUserInfo({
      success: res => {
        console.log(res.userInfo, "huoqudao le ");
        this.setData({
          name: res.userInfo.nickName
        });
        wx.downloadFile({
          url: res.userInfo.avatarUrl,
          //仅为示例，并非真实的资源
          success: function (res) {
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            if (res.statusCode === 200) {
              console.log(res, "reererererer");
              that.setData({
                touxiang: res.tempFilePath
              });
            }
          }
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    return {
      title: this.shopInfoList.name,
      //path: 'remao_shop/packageA/rushdetails/rushdetails?goods_id=' + this.data.shopId + '&img=' + this.data.isShowImg,
      path: 'remao_shop/packageA/rushdetails/rushdetails?goods_id=' + this.shopId + '&img=' + this.isShowImg + '&scene=' + this.userId + 'k' + this.shopId,
      imageUrl: this.isShowImg,
      success: function (res) {
        console.log(res, "转发成功");
      },
      fail: function (res) {
        console.log(res, "转发失败");
      }
    };
  },
  methods: {
    popupshow: function (e) {
      console.log(e);
      this.setData({
        car: e.currentTarget.dataset.car
      });
      this.setData({
        popup: false
      });
    },
    //获取输入框的值
    bindKeyInput: function (e) {
      this.setData({
        inputValue: e.detail.value
      });
    },
    //点击提交按钮
    btnclick: function () {
      var text = this.inputValue;
      wx.showToast({
        title: text,
        icon: 'none',
        duration: 2000
      });
    },
    // 预览单张图片
    lookPic: function (e) {
      console.log(e.currentTarget.dataset.img);
      var picList = [];
      picList.push(e.currentTarget.dataset.img);
      wx.previewImage({
        current: picList[0],
        // 当前显示图片的http链接
        urls: picList // 需要预览的图片http链接列表

      });
    },
    // 预览多张图片
    lookPics: function (e) {
      console.log(e);
      let index = e.currentTarget.dataset.index;
      let indexs = e.currentTarget.dataset.indexs; // console.log(e.currentTarget.dataset.img)

      var picList = this.shopInfoList.comments[index].pics; // picList.push(e.currentTarget.dataset.img)

      wx.previewImage({
        current: picList[indexs],
        // 当前显示图片的http链接
        urls: picList // 需要预览的图片http链接列表

      });
    },
    //消失
    popuphidden: function () {
      this.setData({
        popup: true
      });
    },
    // 选择规格
    clickMenu: function (event) {
			console.log('event',event)
      let that = this; // console.log(event)

      let selectIndex = event.currentTarget.dataset.selectIndex;
      let attrIndex = event.currentTarget.dataset.attrIndex;
      let content = event.currentTarget.dataset.content;
      var count = content[selectIndex].spec_values.length;

      for (var i = 0; i < count; i++) {
        content[selectIndex].spec_values[i].isSelect = false;
      }

      content[selectIndex].spec_values[attrIndex].isSelect = true; // // 必须重新渲染数据----------为了添加isSelect属性

      that.setData({
        specification: content // indexOne: selectIndex,
        // indexTwo: attrIndex,
        // text:''

      }); // 选择规格

      if (selectIndex == 0) {
        guige[0] = this.specification[0].spec_values[attrIndex].spec_value_id;
      } else if (selectIndex == 1) {
        guige[1] = this.specification[1].spec_values[attrIndex].spec_value_id;
      } else if (selectIndex == 2) {
        guige[2] = this.specification[2].spec_values[attrIndex].spec_value_id;
      }

      console.log(guige);

      if (this.specification.length == 1) {
        myGuige = guige[0];
      } else if (this.specification.length == 2) {
        myGuige = guige[1] + '_' + guige[0];
      } else if (this.specification.length == 3) {
        myGuige = guige[2] + '_' + guige[1] + '_' + guige[0];
      }

      console.log();
      console.log('myGuige',myGuige); // 遍历所有可用规格并进行匹配

      for (let item in this.shopInfoList.sys_attrprice) {
        if (myGuige == item) {
          // 显示对应的价格和图片
          let showguige1 = this.shopInfoList.sys_attrprice[myGuige].pic;
          let showguige2 = this.shopInfoList.sys_attrprice[myGuige].price;
          this.setData({
            isShowMoney: showguige2
          });

          if (showguige1 != '') {
            this.setData({
              isShowImg: showguige1
            });
          }
        }
      }
    },

    // 增加商品数量
    addShopNum() {
      if (this.shopNum < this.shopInfoList.goods_number) {
        this.setData({
          shopNum: this.shopNum + 1
        });
      } else {
        wx.showToast({
          title: '抱歉亲，库存不够了呢！',
          duration: 2000,
          icon: 'none'
        });
      }
    },

    // 减少商品数量
    deleteShopNum() {
      if (this.shopNum > 1) {
        this.setData({
          shopNum: this.shopNum - 1
        });
      } else {
        wx.showToast({
          title: '亲，购买数量不能再减了哦！',
          duration: 2000,
          icon: 'none'
        });
      }
    },

    //点击确定
    optionsure(e) {
      let that = this;
      let a = wx.getStorageSync("userId");
      console.log(a);

      if (a == '') {
        wx.switchTab({
          url: '../../pages/mine/mine'
        });
      } else {
        that.setData({
          userId: a
        });

        if (this.specification.length != 0 && myGuige == null) {
          wx.showToast({
            title: '请选择规格',
            icon: 'none',
            duration: 1000
          });
        } //  else {
        //    if (myGuige.indexOf("undefined") != -1) {
        //     wx.showToast({
        //       title: '请选择规格',
        //       icon: 'none',
        //       duration: 1000,
        //     })
        //   } 
        else {
            // 判断库存够不够
            if (this.shopNum > this.shopInfoList.goods_number) {
              wx.showToast({
                title: '亲，库存不够了呢',
                icon: 'none',
                duration: 1000
              });
            } else {
              // 购物车
              if (this.specification.length == 1) {
                var myGuigecart = guige[0];
              } else if (this.specification.length == 2) {
                var myGuigecart = guige[1] + ',' + guige[0];
              } else if (this.specification.length == 3) {
                var myGuigecart = guige[2] + ',' + guige[1] + ',' + guige[0];
              }

              console.log(myGuigecart);
              console.log(that.car);
              app.globalData.request({
                url: api.fyz.add_cart,
                data: {
                  goods_id: that.shopId,
                  uid: that.userId,
                  goods_number: that.shopNum,
                  spec_value_id: myGuigecart,
                  type: that.car,
                  uniacid: that.requestShopId.uniacid,
                  acid: that.requestShopId.acid,
                  version: that.requestShopId.version,
                  platform: 'wx'
                },
                header: {
                  'content-type': 'application/x-www-form-urlencoded' // 默认值

                },
                method: 'POST',
                dataType: 'json',
                responseType: 'text',
                success: res => {
                  console.log(res);

                  if (res.status == 1) {
                    if (that.car == 1) {
                      wx.showToast({
                        title: res.msg,
                        duration: 2000
                      });
                      setTimeout(function () {
                        that.setData({
                          popup: true
                        });
                      }, 2000);
                    } else if (that.car == 2) {
                      // wx.showToast({
                      //   title: res.data.msg,
                      //   duration: 1000
                      // });
                      // setTimeout(function () {
                      console.log(res.cart_id);
                      wx.navigateTo({
                        url: '../affirm/affirm?&cart_id=' + res.cart_id + '&type=' + that.car + '&ismiaosha=' + that.ismiaosha + '&order_type=' + 0
                      });
                      that.setData({
                        popup: true
                      }); // }, 1000)
                    }
                  } else {
                    wx.showToast({
                      title: res.msg,
                      duration: 2000
                    });
                  }
                },
                fail: function (res) {},
                complete: function (res) {}
              });
            }
          } // }

      } // this.setData({ popup: true })

    },

    //分享
    fenxiang: function (e) {
      console.log(e);
      var that = this;
      this.setData({
        fxshow: true
      });
      wx.getStorage({
        key: 'userId',
        success: res => {
          console.log(res);
          this.setData({
            userId: res.data
          });
          app.globalData.request({
            url: api.default.codeWxsharecode,
            data: {
              uid: that.userId,
              page: 'remao_shop/packageA/rushdetails/rushdetails',
              scene: that.shopId
            },
            header: {
              'content-type': 'application/x-www-form-urlencoded' // 默认值

            },
            method: 'POST',
            success: res => {
              // wx.arrayBufferToBase64(res)
              console.log(res);
              that.setData({
                erma: res.data
              });
              wx.downloadFile({
                url: res.data,
                success: function (sres) {
                  console.log(sres);
                  that.setData({
                    erma: sres.tempFilePath
                  });
                  console.log(that.erma);
                },
                fail: function (fres) {}
              });
            }
          });
        },
        fail: res => {
          this.setData({
            fxshow: false
          });

          if (iswe7 == 1) {
            wx.navigateTo({
              url: '../../packageA/login/login'
            });
          } else {
            wx.navigateTo({
              url: '../../packageA/logins/login'
            });
          }
        }
      });
    },
    nofxshow: function () {
      this.setData({
        fxshow: false
      });
    },
    yesshowFun: function () {
      this.setData({
        yesshow: true,
        fxshow: false
      });
    },
    noyesshow: function () {
      this.setData({
        yesshow: false
      });
    },
    //保存图片
    baoctp: function () {
      var that = this,
          image = this.shopInfoList.pic[0].big;
      console.log(this.shopInfoList.pic[0].big);
      wx.downloadFile({
        url: image,

        success(e) {
          console.log(e);
          wx.saveImageToPhotosAlbum({
            filePath: e.tempFilePath,

            success(res) {
              console.log(res);
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 1000
              });
            },

            fail() {
              console.log('失败');
            }

          });
        }

      });
    },

    textByteLength(text, num) {
      // text为传入的文本  num为单行显示的字节长度
      let strLength = 0; // text byte length

      let rows = 1;
      let str = 0;
      let arr = [];

      for (let j = 0; j < text.length; j++) {
        if (text.charCodeAt(j) > 255) {
          strLength += 2;

          if (strLength > rows * num) {
            strLength++;
            arr.push(text.slice(str, j));
            str = j;
            rows++;
          }
        } else {
          strLength++;

          if (strLength > rows * num) {
            arr.push(text.slice(str, j));
            str = j;
            rows++;
          }
        }
      }

      arr.push(text.slice(str, text.length));
      return [strLength, arr, rows]; //  [处理文字的总字节长度，每行显示内容的数组，行数]
    },

    //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
    createNewImg: function () {
      var that = this;
      var context = wx.createCanvasContext('mycanvas');
      context.setFillStyle("#fff");
      context.fillRect(0, 0, 375, 667);
      var path = that.img; //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
      //不知道是什么原因，手机环境能正常显示
      // wx.getImageInfo({
      //   src: path,//服务器返回的图片地址
      //   success: function (res) {
      //     //res.path是网络图片的本地地址
      //     console.log(res)
      //     context.drawImage(res.path, 10, 10, 355, 340)
      //   },
      //   fail: function (res) {
      //     //失败回调
      //   }
      // })

      context.drawImage(path, 10, 10, 355, 340);
      console.log(path);
      var path1 = '';
      console.log(path1, "path1"); //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
      // var path2 = that.data.img;

      var path3 = that.img; // var path4 = that.data.img;

      var path5 = that.erma; // context.drawImage(path2, 126, 486, 120, 120);
      //不知道是什么原因，手机环境能正常显示
      // context.save(); // 保存当前context的状态

      if (that.shopInfoList.name) {
        // 公司名称
        const CONTENT_ROW_LENGTH = 30; // 正文 单行显示字符长度

        let [contentLeng, contentArray, contentRows] = that.textByteLength(that.shopInfoList.name, CONTENT_ROW_LENGTH);
        context.setTextAlign('center');
        context.setFillStyle('#111');
        context.setFontSize(20);
        let contentHh = 22 * 1;

        for (let m = 0; m < contentArray.length; m++) {
          context.fillText(contentArray[m], 180, 390 + contentHh * m);
        }
      }

      var price = that.shopInfoList.price; //绘制名字

      context.setFontSize(30);
      context.setFillStyle('red');
      context.setTextAlign('center');
      context.fillText('￥' + price, 180, 475);
      context.stroke(); // //绘制一起吃面标语
      // context.setFontSize(20);
      // context.setFillStyle('#999');
      // context.setTextAlign('center');
      // context.fillText(that.data.shopInfoList.name, 185, 370);
      // context.stroke();
      //绘制验证码背景
      // context.drawImage(path3, 48, 390, 280, 84);
      //绘制code码
      // context.setFontSize(40);
      // context.setFillStyle('#fff');
      // context.setTextAlign('center');
      // context.fillText(that.data.code, 185, 435);
      // context.stroke();
      //绘制左下角文字背景图
      // context.drawImage(path4, 25, 520, 184, 82);
      // context.setFontSize(12);
      // context.setFillStyle('#333');
      // context.setTextAlign('left');
      // context.fillText("进入小程序输入朋友的邀请", 35, 540);
      // context.stroke();

      context.setFontSize(17);
      context.setFillStyle('#333');
      context.setTextAlign('left');
      context.fillText("长按识别小程序码访问", 10, 560);
      context.stroke(); // context.setFontSize(12);
      // context.setFillStyle('#333');
      // context.setTextAlign('left');
      // context.fillText("优惠券1张哦~", 35, 580);
      // context.stroke();
      //绘制二维码

      context.drawImage(path5, 230, 500, 130, 130); // wx.getImageInfo({
      //   src: path5,//服务器返回的图片地址
      //   success: function (res) {
      //     //res.path是网络图片的本地地址
      //     console.log(res)
      //     context.drawImage(res.path, 20, 480, 150, 150)
      //   },
      //   fail: function (res) {
      //     //失败回调
      //   }
      // })
      //绘制头像
      // context.arc(186, 246, 50, 0, 2 * Math.PI) //画出圆
      // context.strokeStyle = "#ffe200";
      // context.clip(); //裁剪上面的圆形
      // context.drawImage(path1, 136, 196, 100, 100); // 在刚刚裁剪的园上画图

      context.draw(); //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时

      setTimeout(function () {
        wx.canvasToTempFilePath({
          canvasId: 'mycanvas',
          success: function (res) {
            var tempFilePath = res.tempFilePath;
            that.setData({
              imagePath: tempFilePath,
              canvasHidden: true
            });
          },
          fail: function (res) {
            console.log(res);
          }
        });
      }, 200);
    },
    //点击保存到相册
    baocun: function () {
      var that = this;
      wx.saveImageToPhotosAlbum({
        filePath: that.imagePath,

        success(res) {
          wx.showModal({
            content: '图片已保存到相册，赶紧晒一下吧~',
            showCancel: false,
            confirmText: '好的',
            confirmColor: '#333',
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定');
                /* 该隐藏的隐藏 */

                that.setData({
                  maskHidden: false
                });
              }
            },
            fail: function (res) {
              console.log(11111);
            }
          });
        }

      });
    },
    //点击生成
    formSubmit: function (e) {
      var that = this;
      this.setData({
        yesshow: true,
        fxshow: false,
        maskHidden: false
      });
      wx.showToast({
        title: '生成中...',
        icon: 'loading',
        duration: 1000
      });
      setTimeout(function () {
        wx.hideToast();
        that.createNewImg();
        that.setData({
          maskHidden: true
        });
      }, 1000);
    },
    getlist: function () {
      var that = this;
      var uid = wx.getStorageSync("userId");
      that.setData({
        userId: uid
      });
      console.log(this.requestShopId);
      app.globalData.request({
        url: api.fyz.shopInfo,
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值

        },
        method: 'POST',
        data: {
          goods_id: that.shopId,
          user_id: that.userId
        },
        success: res => {
          console.log('11',res);
          this.setData({
            bannerList: res.pic,
            shopInfoList: res,
            mktprice: res.mktprice,
            specification: res.specification,
            isShowMoney: res.price
          });
          console.log(this.mktprice);

          if (this.mktprice == 0) {
            this.setData({
              mktpriceShow: true
            });
            console.log('0' + this.mktpriceShow);
          } else {
            this.setData({
              mktpriceShow: false
            });
            console.log('1' + this.mktpriceShow);
          }

          that.star(); //判断轮播图

          var length = res.pic.length;

          if (length == 1) {
            this.setData({
              bannerLength: false
            });
          } else {
            this.setData({
              bannerLength: true
            });
          } // 判断该商品是否收藏


          if (res.is_collect == 0) {
            this.setData({
              showView: true
            });
          } else if (res.is_collect == 1) {
            this.setData({
              showView: false
            });
          }

          this.setData({
            img: this.shopInfoList.pic[0].big
          });
          wx.downloadFile({
            url: res.pic[0].big,
            success: function (sres) {
              console.log(sres);
              that.setData({
                img: sres.tempFilePath
              });
              console.log(that.img);
            },
            fail: function (fres) {}
          });
          console.log(that.showView);
        },
        fail: function (res) {},
        complete: function (res) {}
      });
    },

    // 评价星级
    star() {
      let that = this;
      let starArray = [];

      for (let a = 0; a < that.shopInfoList.comments.length; a++) {
        starArray.push(parseInt(that.shopInfoList.comments[a].star));
      }

      console.log(starArray);
      that.setData({
        starNum: starArray
      });
    },

    timeFormat(param) {
      return param < 10 ? '0' + param : param;
    },

    countDown() {
      //倒计时函数
      // 获取当前时间，同时得到活动结束时间数组
      let newTime = new Date().getTime();
      let endTimeList = this.actEndTimeList;
      let countDownArr = []; // 对结束时间进行处理渲染到页面

      endTimeList.forEach(o => {
        let endTime = new Date(o).getTime();
        let obj = null; // 如果活动未结束，对时间进行处理

        if (endTime - newTime > 0) {
          let time = (endTime - newTime) / 1000; // 获取天、时、分、秒

          let day = parseInt(time / (60 * 60 * 24));
          let hou = parseInt(time % (60 * 60 * 24) / 3600) + day * 24;
          let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
          let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
          obj = {
            day: this.timeFormat(day),
            hou: this.timeFormat(hou),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          };
        } else {
          //活动已结束，全部设置为'00'
          obj = {
            day: '00',
            hou: '00',
            min: '00',
            sec: '00'
          };
        }

        countDownArr.push(obj);
      }); // 渲染，然后每隔一秒执行一次倒计时函数

      this.setData({
        countDownList: countDownArr
      });
      setTimeout(this.countDown, 1000);
    },

    //详情评价点击事件
    getStatus(e) {
      this.setData({
        status: e.currentTarget.dataset.index,
        hidden: false
      });
    },

    // 收藏商品
    changepic: function () {
      var that = this;

      if (that.isLogin() == 0) {
        wx.switchTab({
          url: '../../pages/mine/mine'
        });
      } else {
        that.setData({
          userId: wx.getStorageSync("userId")
        });
        app.globalData.request({
          url: api.fyz.shopCollection,
          data: {
            goods_id: this.shopId,
            user_id: that.userId
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值

          },
          method: 'POST',
          success: res => {
            console.log(res);
            wx.showToast({
              title: res.msg,
              duration: 1000
            });
            that.setData({
              showView: !that.showView
            });
          },
          fail: function (res) {},
          complete: function (res) {}
        });
      }
    },

    // 跳转购物车
    toShopCar() {
      wx.switchTab({
        url: '../../pages/trolley/trolley'
      });
    },

    // 判断是否登录
    isLogin() {
      if (wx.getStorageSync("userId") == '') {
        return 0;
      } else {
        return 1;
      }
    },

    banner(e) {
      console.log(this.bannerList);
      var list = [],
          index = e.currentTarget.dataset.index;
      console.log(e);

      for (var i = 0; i < this.bannerList.length; i++) {
        list[i] = this.bannerList[i].big;
      }

      wx.previewImage({
        current: list[index],
        urls: list // 需要预览的图片http链接列表

      });
    }

  }
};
</script>
<style>
@import "./rushdetails.css";
</style>